<template>
	<view>
		<!-- 轮播 -->
		<swiper   :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item  v-for="(item,i) in carouselItems" :key="i">
				<image :src="item.img" style="width:100%" mode="widthFix" />
			</swiper-item>
			
		</swiper>
		<!-- 快捷入口 -->
		<uni-grid :column="4" :showBorder="false"  :square="false">
			<uni-grid-item >
				<view class="grid-item-box">
					<image src="/static/image/menu1.png" class="image" mode="aspectFill"></image>
					<text class="text">新闻资讯</text>
				</view>
			</uni-grid-item>
			<uni-grid-item >
				<view class="grid-item-box">
					<image src="/static/image/menu2.png" class="image" mode="aspectFill"></image>
					<text class="text">图片分享</text>
				</view>
			</uni-grid-item>
			<uni-grid-item >
				<view class="grid-item-box">
					<image src="/static/image/menu3.png" class="image" mode="aspectFill"></image>
					<text class="text">商品购买</text>
				</view>
			</uni-grid-item>
			<uni-grid-item >
				<view class="grid-item-box">
					<image src="/static/image/menu4.png" class="image" mode="aspectFill"></image>
					<text class="text">留言反馈</text>
				</view>
			</uni-grid-item>
			<uni-grid-item >
				<view class="grid-item-box">
					<image src="/static/image/menu5.png" class="image" mode="aspectFill"></image>
					<text class="text">视频专区</text>
				</view>
			</uni-grid-item>
			<uni-grid-item >
				<view class="grid-item-box">
					<image src="/static/image/menu6.png" class="image" mode="aspectFill"></image>
					<text class="text">联系我们</text>
				</view>
			</uni-grid-item>
			
			
			
			
		</uni-grid>

		<!-- 推荐商品 -->
		<view class="titleHeader">
					<uni-icons type="shop" size="30"></uni-icons>
					<view class="">
						商品推荐
					</view>
				</view>
				<view class="listContainer1">
					<view class="listItem" v-for="(item,i) in recommendGoodsList" :key="i">
						<image class="goodsImage" :src="item.goodsImg" mode="aspectFit"></image>
						<view class="goodsName">{{item.goodsName}}</view>
						<view class="goodsPrice">${{item.goodsPrice}}</view>
					</view>
				</view>
		<!-- 新品上架 -->
				<view class="titleHeader">
					<uni-icons type="shop" size="30"></uni-icons>
					<view class="">
						新品上架
					</view>
				</view>
				<view class="listContainer1">
					<view class="listItem" v-for="(item,i) in newGoodsList" :key="i">
						<image class="goodsImage" :src="item.goodsImg" mode="aspectFit"></image>
						<view class="goodsName">{{item.goodsName}}</view>
						<view class="goodsPrice">${{item.goodsPrice}}</view>
					</view>
				</view>
			<!-- 热销商品 -->
				<view class="titleHeader">
					<uni-icons type="shop" size="30"></uni-icons>
					<view class="">
						热销商品
					</view>
				</view>
				<view class="listContainer1">
					<view class="listItem" v-for="(item,i) in hotGoodsList" :key="i">
						<image class="goodsImage" :src="item.goodsImg" mode="aspectFit"></image>
						<view class="goodsName">{{item.goodsName}}</view>
						<view class="goodsPrice">${{item.goodsPrice}}</view>
					</view>
				</view>		
		
		
		
		
		
		
		
		<view class="">
			<view class="item" v-for="(item,i) in recommendGoodsList" :key="i">
				<uni-list-item style="height: 100%;" :title="item.goodsName" :note="item.goodsPrice" :thumb="item.goodsImg"  />
			</view>
			
		</view>
		
		<view class="listContainer2">
			<uni-list-item class="listItem" v-for="(item,i) in recommendGoodsList" :key="i" :ellipsis="2" direction="column">
				<template v-slot:header>
					<image class="goodsImage" :src="item.goodsImg" mode="widthFix"></image>
				</template>
				<template v-slot:footer>
					<view class="goodsPrice">{{item.goodsPrice}}</view>
				</template>
			</uni-list-item>
		</view>
		
		
	</view>
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				carouselItems: [],
				recommendGoodsList:[],
				hotGoodsList: [], //热销商品
				newGoodsList: [], // 新品上架
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData(){
				uni.request({
				    url: 'http://www.zjff495.cn:5058/app/v1/home/index', //仅为示例，并非真实接口地址。
				    
				}).then(result=>{
					console.log(result.data)
					this.carouselItems=result.data.data.carouselList
					this.recommendGoodsList=result.data.data.recommendGoodsList
					this.hotGoodsList = result.data.data.hotGoodsList;
					this.newGoodsList = result.data.data.newGoodsList;

				})
			}
		},
		// created() {
		// 			uni.request({
		// 				url: 'http://www.zjff495.cn:5058/app/v1/home/index', //仅为示例，并非真实接口地址。
		// 				data: {
		// 					text: 'uni.request'
		// 				},
		// 				header: {
		// 					'custom-header': 'hello' //自定义请求头信息
		// 				},
		// 				success: (res) => {
		// 					console.log(res.data.data.recommendGoodsList);
		// 					this.recommendGoodsList =res.data.data.recommendGoodsList;
		// 				},
						
		// 			})
		// 		},
		
	}
</script>

<style scoped>
	.image{
		width: 50px;
		height: 50px;
	}
	.text {
			font-size: 26rpx;
			margin-top: 10rpx;
		}
	.grid-item-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
		
	.titleHeader {
		padding: 10px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $uni-bg-color-grey;
	}
	.listContainer1 {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
 
 		.listItem {
 			margin: 10px 0;
 			display: flex;
 			flex-direction: column;
 			width: 33.3%;
 
 			.goodsImage {
 				height: 100px;
 				width: 100%;
 			}
 
 			.goodsName {
 				margin: 10px 10px 0;
 				display: -webkit-box;
 				-webkit-box-orient: vertical;
 				-webkit-line-clamp: 2;
 				overflow: hidden;
 			}
 
 			.goodsPrice {
 				margin: 0 10px;
 				font-size: 18px;
 				font-weight: bold;
 				color: red;
 				text-align: right;
 			}
 		}
		}
 .listContainer2{
 	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	.listItem{
		 width: 33.3%;
		 .goodsImaage{
			 padding: 5px 0;
			 width: 100%;
			 
		 }
		 .goodsPrice{
			 margin: 0 10px;
			 font-size: 18px;
			 font-weight: bold;
			 color: red;
			 text-align: right;
		 }
	 }
 }
</style>
